<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrapper {
			position: absolute;
			width: 400px;
			height: 80px;
			background-color: yellow;
			left: -400px;
			top: 300px;

		}
		.wrapper .box {
			width: 40px;
			height: 80px;
			position: absolute;
			top: 0;
			right: -40px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="box"></div>
	</div>
	<script>
		var wrapper = document.getElementsByClassName('wrapper')[0];
		var box = document.getElementsByClassName('box')[0];
		var timer = null;
		wrapper.onmouseover = function (e) {//onmouseenter 和onmouseleave 连用 他俩都不冒泡
			console.log(e.target);//先box冒泡执行一遍，当快出box的时候out事件冒泡，紧接着wrapper自身事件触发
			startMove(this,0);
		}
		wrapper.onmouseout = function (e) {
			console.log(e.target);
			startMove(this,-400);
		}
		function startMove(obj,target) {
			// console.log(timer);
			clearInterval(timer);//每次进入函数时先清除定时器，否则多次点击会开启多个定时器
			timer = setInterval(function () {
				var speed = obj.offsetLeft < target ? Math.ceil((target - obj.offsetLeft) / 7) : Math.floor((target - obj.offsetLeft) / 7)//想上取整，但是负的时候取为0 
				// console.log(speed);
				if(obj.offsetLeft === target) {
					clearInterval(timer);

				}else {
					obj.style.left = obj.offsetLeft + speed + 'px';
				}
			},30);
		}
	</script>
</body>
</html>